<template>
	<view class="layout">
		<view class="input-box" :style="{ bottom: keyboardHeight + 'px' }">
		    <input type="text" placeholder="在此输入..." @focus="onInputFocus" @blur="onInputBlur"/>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const keyboardHeight = ref(0);
const handleInputFocus = () => {
  // 监听键盘高度变化
  uni.onKeyboardHeightChange((res) => {
    keyboardHeight.value = res.height;
  });
};
const handleInputBlur = () => {
  // 当输入框失去焦点时重置keyboardHeight
  keyboardHeight.value = 0;
};
onMounted(() => {
  // 组件挂载时可以执行一些初始化操作
});
onUnmounted(() => {
  // 组件卸载前清除监听器等清理工作
  uni.offKeyboardHeightChange(); // 确保移除监听器以避免内存泄漏
});
</script>

<style lang="scss" scoped>
	/* 输入框容器 */
	.layout{
		position: fixed;
		left: 0;
		bottom: 0; /* 默认位于屏幕底部 */
		width: 100%;
	}
	.input-box {
	  background-color: #fff;
	  padding: 10px;
	  box-sizing: border-box;
	  transition: bottom 0.3s ease; /* 平滑过渡效果 */
	}
	
	/* 防止输入框被遮挡 */
	page {
	  padding-bottom: 50px; /* 根据实际输入框高度调整 */
	}
</style>